<template>
  <div class="bg-level-1">
    <Header :type="1"></Header>
    <div class="wrong-question-list homework-list w1200">
      <!-- <BreadcrumbBook :classInfo="classInfo" title="课后作业"></BreadcrumbBook> -->
      <div class="wrong-question-banner homework-list-banner">
        <h4 class="title">课后作业</h4>
        <el-form
          :model="homeworkFrom"
          class="question-screen"
          style="flex-direction: column;align-items: flex-start;"
        >
          <el-form-item label="作业类型：" class="item-source">
            <el-radio-group v-model="homeworkFrom.type" @change="changeScreen">
              <el-radio-button
                v-for="item in homeworkType"
                :key="item.id"
                :label="item.label"
                >{{ item.name }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="完成状态：" class="item-source">
            <el-radio-group
              v-model="homeworkFrom.status"
              @change="changeScreen"
            >
              <el-radio-button
                v-for="item in subjects"
                :key="item.id"
                :label="item.label"
                >{{ item.name }}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div class="wrong-question-container" v-if="homeworkData.total_num > 0">
        <div
          class="homework-item"
          v-for="(homework, index) in homeworkList"
          :key="index"
        >
          <div class="homework-item-left">
            <div
              class="item-type"
              :class="homework.testTime ? 'type-1' : 'type-2'"
            >
              <span> {{ homework.testTime ? "考试" : "练习" }}</span>
            </div>
            <div class="item-info">
              <h4 class="title">
                {{ homework.title }}
                <span class="number">题量：{{ homework.number }}</span>
              </h4>
              <div class="other">
                <span
                  class="score"
                  v-if="homework.score || homework.score === 0"
                  >{{ homework.score }}分</span
                >
                <span class="time">
                  {{ homework.start_time }} 至 {{ homework.end_time }}</span
                >
              </div>
            </div>
          </div>
          <div class="homework-item-right">
            <span class="status" v-if="homework.nowStatus == 4">
              该作业已经过期
            </span>
            <span class="status" v-if="homework.nowStatus == 5">
              该作业尚未开始
            </span>
            <span
              class="status"
              v-if="homework.nowStatus == 1 && homework.is_finish == 2"
            >
              该作业正在阅卷中
            </span>
            <span class="status" v-if="homework.nowStatus == 3">
              该作业已超时
            </span>
            <div class="button-list">
              <el-button
                class="button button-border-primary"
                v-if="homework.nowStatus == 1 && homework.is_finish == 0"
                :disabled="$store.getters.isTeacher"
                @click="startWork(homework)"
              >
                开始作业
              </el-button>

              <el-button
                class="button button-border-primary"
                v-if="homework.is_finish == 1"
                @click="goLookPaper(homework)"
              >
                查看结果
              </el-button>
              <el-button
                class="button button-border-primary"
                v-if="homework.is_finish == 1"
                @click="showReortDislog(homework)"
              >
                查看报告
              </el-button>
              <el-button
                class="button button-border-primary"
                v-if="homework.is_finish == 1"
                @click="showReortTb(homework)"
              >
                查看图谱
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="wrong-question-container wrong-question-no no-container"
        v-else
      >
        <img src="@/assets/img/no-question.png" alt="" />
        <p class="no-text">暂无作业</p>
      </div>
      <!-- wrong-question-pagination  -->
      <div class="common-pagination pt10 pb20">
        <!--   v-if="showPagination" -->
        <el-pagination
          v-if="!isPending"
          background
          layout="total,prev, pager, next"
          :total="homeworkData.total_num"
          @current-change="handleCurrentChange"
          hide-on-single-page
          :page-size="homeworkFrom.pageSize"
          :current-page.sync="homeworkFrom.pageNum"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      title="作业知识点图谱"
      :visible.sync="reportTp"
      :lock-scroll="true"
      width="800px"
    >
      <div class id="tptb" style="width: 100%; height: 450px"></div>
    </el-dialog>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { getHomeworkList, getHomeworkInfo } from "@/api/index.js";
//   import EventBus from "@/assets/js/eventBus";
export default {
  data() {
    return {
      classInfo: {},
      homeworkFrom: {
        type: null,
        status: 0,
        pageNum: 1,
        pageSize: 10,
      },
      homeworkData: {
        total: 0,
      },
      homeworkList: [],
      homeworkType: [
        {
          id: 1,
          label: null,
          name: "全部",
        },
        {
          id: 2,
          label: 2,
          name: "教师作业",
        },
        {
          id: 3,
          label: 1,
          name: "智能作业",
        },
      ],
      subjects: [
        {
          id: 1,
          label: null,
          name: "全部",
        },
        {
          id: 2,
          label: 0,
          name: "未完成",
        },
        {
          id: 3,
          label: 1,
          name: "已完成",
        },
        {
          id: 4,
          label: 3,
          name: "已过期",
        },
      ],
      reportTp: false,
      isPending: false,
    };
  },
  methods: {
    //获取homework列表
    getHomework() {
      let data = {
        is_finish: this.homeworkFrom.status,
        // start: null,
        classify: this.homeworkFrom.type,
        class_id: this.classInfo.id,
        book_id: this.classInfo.book_id,
        page_size: this.homeworkFrom.pageSize,
        page_num: this.homeworkFrom.pageNum,
      };
      this.isPending = true;
      getHomeworkList(data)
        .then((res) => {
          // console.log(res);
          this.isPending = false;
          if (res.code == 200) {
            res.data.list.forEach((item) => {
              let startTime = new Date(
                item.startTime ? item.startTime.replace(/-/g, "/") : ""
              ).getTime();
              let endTime = new Date(
                item.endTime ? item.endTime.replace(/-/g, "/") : ""
              ).getTime();
              let nowTime = new Date().getTime();
              if (nowTime >= endTime) {
                // 已过期
                item.nowStatus = 4;
              } else if (nowTime <= startTime) {
                // 未开始
                item.nowStatus = 5;
              } else {
                // 进行中
                item.nowStatus = 1;
              }
              if (item.nowStatus == 1 && item.not == 1) {
                //超时
                item.nowStatus = 3;
              }
              // 已完成
              if (item.is_finish == 1) {
                item.nowStatus = 2;
              }
            });
            this.homeworkData = res.data;
            this.homeworkList = this.homeworkData.list;
            console.log(this.homeworkList, "this.homeworkList");
            // this.homeworkList = this.homeworkData.list.sort(function (a, b) {
            //   return a.nowStatus - b.nowStatus;
            // });
          } else {
            this.homeworkData = {
              total: 0,
            };
          }
        })
        .catch(() => {
          this.isPending = false;
        });
    },
    //分页切换
    handleCurrentChange(val) {
      this.homeworkFrom.pageNum = val;
      this.getHomework();
    },
    changeScreen() {
      this.homeworkFrom.pageNum = 1;
      this.getHomework();
    },
    startWork(item) {
      console.log(item, "getHomeworkInfo");
      //   getHomeworkInfo({
      //     id: item.id,
      //     isStart: true,
      //     isTest: false,
      //   });
      let type = null;
      let task = null;
      let taskType = null;
      if (item.source == "7") {
        type = 2;
      }
      if (item.source == "10") {
        type = 2;
        task = true;
        taskType = "2";
      }
      if (item.source == "11") {
        type = 2;
        task = true;
        taskType = "1";
      }

      this.$router.push({
        name: "testPaper",
        query: {
          id: item.id,
            isTest: item.testTime ? 1 : 0,
        //   isTest: 1,
          title: item.title,
          task,
          taskType,
          type,
          endTime: item.endTime,
        },
      });
    },
    //查看报告
    showReortDislog(item) {
      this.$router.push({
        name: "paperReport",
        query: {
          paperTitle: item.title,
          paperType: item.testTime,
          paperId: item.id,
        },
      });
      //   let routeData = this.$router.resolve({
      //     name: "paperReport",
      //     query: {
      //       paperTitle: item.title,
      //       paperType: item.testTime,
      //       paperId: item.id,
      //     },
      //   });
      //   window.open(routeData.href, "_blank");
    },
    goLookPaper(item) {
      this.$router.push({
        name: "lookPaper",
        query: {
          id: item.id,
          title: item.title,
          isTest: item.testTime ? 1 : 0,
        },
      });
    },
    initPage() {
      this.classInfo = JSON.parse(localStorage.getItem("bookData"));
      this.homeworkFrom = {
        type: null,
        status: 0,
        pageNum: 1,
        pageSize: 10,
      };
      this.getHomework();
    },
  },
  components: {
    Header,
  },
  created() {
    this.classInfo = JSON.parse(localStorage.getItem("classInfo"));
    this.initPage();
  },
  mounted() {
    //   EventBus.$on("changeBook", () => {
    //     this.initPage();
    //   });
    // this.sendMessage({
    //   code: 101,
    //   classId: this.classInfo.id,
    //   data: {
    //     bookId: this.classInfo.bookId,
    //     behavior: 7,
    //     pageId: "6",
    //   },
    // });
  },
  // beforeDestroy() {
  //   EventBus.$off("changeBook");
  // },
};
</script>
<style lang="scss" scoped></style>
